<!doctype html>
<html lang="zh-ch">

<head>
    <title>新世界</title>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
        
        <link rel="stylesheet" media="all" type="text/css" href="css/reset.css">
        <link rel="stylesheet" media="all" type="text/css" href="css/main.css">
    </head>
    
    <body>
        <div id="part1">
            <div class="header">
            <img src="img/book.png" id="header-icon">
            <p id="new-word">新世界</p>
            <nav class="nav">
                <a class="focused" href="">首页</a>
                <a href="">最新活动</a>
                <a href="">项目介绍</a>
                <a href="">爱心社区</a>
                <a href="">关于我们</a>
                <a id="login" href="">登录</a>
            </nav>
            </div>

            <div id="time-of-new-life">
            <div class="background-filter"></div>
                <div class="content">
                    <h1>Time of new life</h1>
                    <p>新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
                    <a href="">开始体验</a>
                </div>
            </div>
            <div id="intro">
                <div class="content">
                <div id="intro1">
                    <img src="img/intro1.png" alt="">
                    <p>打造全新世界观，让你更<br>爱你的生活</p>
                </div>
                <div id="intro2">
                    <img src="img/intro2.png" alt="">
                    <p>丰富多彩的公益活动，发<br>挥新世界的主人公意识</p>
                </div>
                <div id="intro3">
                    <img src="img/intro3.png" alt="">
                    <p>时尚的新理念，超前体验<br>未知的生活</p>
                </div>
                <div id="intro4">
                    <img src="img/intro4.png" alt="">
                    <p>完善的培养机制，培养你<br>全新的世界观</p>
                </div>
                </div>
            </div>
            <div id="whats-more">
                <div class="content">
                <img src="img/book.png" alt="">
                <h1>关于新世界，你不知道的还有什么？</h1>
                </div>
            </div>
        </div>
        
        <div id="part-2">
            <div class="findInfo">查找新世界城市活动信息</div>
            <p>每个城市的有不同的活动信息，请自助查询您所需要了解的城市</p>
            <div class="find">
                <div class="dropdown">
                    <div class="dropdown-title">
                        <span>中国</span>
                        <div class="dropdown-icon"></div>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="dropdown-title">
                        <span>省份</span>
                        <div class="dropdown-icon"></div>
                    </div>
                    <ul class="select">
                        <li><span>北京市</span></li>
                        <li><span>天津市</span></ li>
                            <li><span>河北省</span></li>
                            <li><span>陕西省</span></li>
                            <li><span>内蒙古自治区</span></li>
                            <li><span>辽宁省</span></li>
                    </ul>
                </div>
                <div class="dropdown">
                    <div class="dropdown-title">
                        <span>城市</span>
                        <div class="dropdown-icon"></div>
                    </div>
                </div>
                <div class="search">
                    <div class="search-title">
                        搜&emsp;&emsp;索
                    </div>
                </div>
            </div>
        </div>
        
        <div id="part-3">
            <!-- start 3.1 -->
            <div id="activities">
                <div id="beijing" class="activity">
                    <div class="img-frame"><img src="img/pic1.jpg" alt="activity-bj"></div>
                    <p class="act-info"><span>北京活动</span><br>新社区大联盟</p>
                </div>
                <div id="shanghai" class="activity">
                    <p class="act-info"><span>上海活动</span><br>夜上海新景观探索</p>
                    <div class="img-frame"><img src="img/pic2.jpg" alt="activity-sh"></div>

                </div>
                <div id="shenzhen" class="activity">
                    <div class="img-frame"><img src="img/pic3.jpg" alt="activity-sz"></div>
                    <p class="act-info"><span>深圳活动</span><br>全新海岸线观点站</p>
                </div>
                <div id="xianggang" class="activity">
                    <div class="img-frame"><img src="img/pic4.jpg" alt="activity-xg"></div>
                    <p class="act-info"><span>香港活动</span><br>奢侈消费大派送</p>
                </div>
            </div>
            <!-- end 3.1 -->
            <!-- start 3.2 -->
            <div id="new-world-01">
                <div id="img-new-world">
                    <img src="img/pic5.jpg" alt="new world">
                </div><div id="new-world-content"><!--保持两个div的连写，去除inline-block的div直接的空隙-->
                <div id="new-world-container">
                    <h2>新世界 / <span>01</span></h2>
                    <div id="new-world-text">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</div>
                    <div id="more-info">更多详情</div>
                    <div id="more-dot">
                        <div class="selected-dot"></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                </div>
            </div>
            <!-- end 3.2 -->
            <!-- start 3.3 -->
            <div id="new-times">
                <div class="time" id="time-part1">
                    <p>新时代
                        <br>关于爱生活的我们</p>
                    <div class="time-line"></div>
                    <div id="read-more">
                        <p>查看更多</p>
                    </div>
                </div><div class="time" id="time-part2">
                    <p>新时代
                        <br>关于爱生活的我们</p>
                    <div class="dark-line" class=""></div>
                    <div id="read-more-red">
                        <p>查看更多</p>
                    </div>
                </div><div class="time" id="time-part3">
                    <img src="img/pic7.jpg" alt="time-person" id="time-person">
                    <img src="img/pic8.png" alt="triangle" id="triangle">
                </div>
            </div>
        </div>
        <!-- end 3.3 -->
        <div id="part-4">
        
            <div id="join-us">
            
                <div id="join-words">
                    <h3>成为我们的志愿者</h3>
                    <p>新世界的大家庭需要每一个爱生活的人加入，如果你够年轻，有梦想，有激情</p>
                    <p>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
                </div>
                
                <div id="join-form">
                    <div id="join-obey">
                        <dl>
                            <dt><p>新世界志愿者协议</p></dt>
                            <dd><a href="#">加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法规，并且本着平等资源的原则 ......</a></dd>
                            <dd class="more-clause"><a href="#"><img src="img/select-1.png">more</a></dd>
                        </dl>
                        
                        <dl>
                            <dt><p>新世界志愿者权利</p></dt>
                            <dd><a href="#">新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在地新世界活动的优先参与资格 ......</a></dd>
                            <dd class="more-clause"><a href="#"><img src="img/select-1.png">more</a></dd>
                        </dl>
                        
                        <dl>
                            <dt><p>更多条款</p></dt>
                            <dd class="more-clause"><a href="#"><img src="img/select-1.png">more</a></dd>
                        </dl>
                    </div>
                    
                    <!--这里设计图和效果图显示完全不一样，以效果图为准>
                    <1920x1080的宽屏模式下表格部分会有一定的拉伸，见谅！！-->
                    <form action="#" method="POST" id="join-info">
                        <input type="text" name="post-name" value="姓名：">
                        <input type="text" name="post-age" value="年龄：">
                        <input type="text" name="post-communicate" value="联系方式：">
                        <input type="text" name="post-address" value="联系地址：">
                        <textarea name="post-dreamlife">请简单描述您梦想的生活：（此处设计图样式与效果图样式完全不同，因效果图美观，故以效果图为准）</textarea>
                        <input id="info-submit" type="submit" value="提交申请"> 
                    </form>
                </div>
            
            </div>
            
            <div id="footer">
                <div id="footer-contact-us">
                    <h3>联系我们</h3>
                    <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯</p>
                    <p>也可以通过以下任何方式关注我们动态</p>
                    
                    <div id="contact-form">
                        <input type="text" placeholder="someone@email.com" id="contact-input"/>
                        <input type="submit" id="contact-button" value="提 交"/>
                    </div>    
                    
                    <div id="contact-link">
                        <a href="https://qq.com"><img src="img/link-qq.png"></a>
                        <a href="https://weibo.com"><img src="img/link-weibo.png"></a>
                        <a href="https://twitter.com"><img src="img/link-twitter.png"></a>
                        <a href="https://baidu.com"><img src="img/link-web.png"></a>
                    </div>
                </div>
                
                <div id="footer-bottom">
                    <a href="#" id="footer-left">@2016新世界</a>
                    <a href="#" id="footer-right">Back to top</a>
                </div>
            </div>
        </div>
    </body>
</html>    

